<template>
  <div>
    <van-index-bar highlight-color="#000" sticky-offset-top="10" sticky="false">
      <div v-for="(item,index) in cityDatas" :key="index">
        <van-index-anchor style="background-color: #eee;" :index="item.list" />
        <van-cell
          @click="handleCity(cityItem.spell,cityItem.name)"
          :title="cityItem.name"
          v-for="(cityItem) of item.data"
          :key="cityItem.id"
        ></van-cell>
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import '../assets/css/resetvant.css'
export default {
  name: "city",
  data() {
    return {
      cityDatas: [],
      hotCity: []
    };
  },
  mounted() {
    this.axios.get("http://yapi.demo.qunar.com/mock/43104/film").then(res => {
      var cities = res.data.data.cities;
      this.hotCity = res.data.data.hotCities;
      for (let i in cities) {
        var city = {};
        city.list = i;
        city.data = cities[i];
        this.cityDatas.push(city);
      }
    });
  },
  methods:{
      handleCity(spell,name){
       this.$store.dispatch("changeCity",name);
       this.$router.push({name:'films'})
        // console.log(spell)
        // console.log(name)
      }
  }
};
</script>

<style scoped>

</style>